<template>
  <div class="goods-item" @click="itemClick">
    <img :src="'http://150.158.212.186:3001' + goodsListItem.src" alt="" @load="imgLoad">
    <div class="goods-info">
      【{{goodsListItem.goods_category_name}}】{{goodsListItem.describe}}
    </div>
    <span class="price">￥{{goodsListItem.price}}</span>
  </div>
</template>

<script>
  export default {
    name: "GoodsItem",
    props: {
      goodsListItem: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      showImg () {
        return this.goodsListItem.image || this.goodsListItem.show.img // 有goodsListItem.show.img就返回,没有就返回goodsListItem.img
      }
    },
    methods: {
      /**当这个img结点加载完<图片加载完>*/
      imgLoad () { /**因为图片是异步加载的,而BetterScroll在每次调用时只计算一次滑动的大小时,图片有可能没加载完就计算完了,此时,滑动的大小就计算的过小
       ,导致滑动到某些地方不能滑动,所以监听每个图片的加载,若加载成功,就调用这个方法,然后通过事件总线$bus发送一个事件,该事件会被$on进行监听接收,再其内部
       进行处理,调用重新刷新BetterScroll对象,以重新计算滑动的大小*/
        if (this.$route.path.indexOf('/home')) { //如果当前的路由是 /home
          this.$bus.$emit('homeItemImgLoad')
        } else if (this.$route.path.indexOf('/detail')) { //如果当前的路由是detail
          this.$bus.$emit('detailFeatureItemImgLoad')
        }
        /**事件总线可以用于没有父子关系的组件之间;注意:通过事件总线发射的事件,在全局任何地方使用$on('$emit发射的事件名')均可监听到*/

      },
      itemClick () {
        this.$router.push({name: 'ShowGoodsDetail', params: {goods: this.goodsListItem}})
      }
    }
  }
</script>

<style scoped>
  .goods-item {
    position: relative;

    margin: 4px;
    width: 240px;
    height: 300px;

    background-color: white;
  }
  .goods-item:hover {
    cursor: pointer;
    opacity: 0.75;

    box-shadow: 0 0 3px #3d3d3d;
    color: #cdcdcd;
  }
  .goods-item img {
    width: 90%;
    height: 70%;

    margin: 3% 5%;
  }
  .goods-item .goods-info {
    margin-left: 5%;
    margin-right: 5%;
    height: 48px;
    overflow: hidden;

    color: #595959;
    font-size: 10px;

    /*background-color: yellow;*/
  }
  .goods-item .price {
    position: absolute;
    left: 0;
    bottom: 0;

    color: red;
    font-weight: bold;
    font-size: 20px;
  }
</style>